<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <title>资源选择</title>
  <style>
    .addIc:hover {
      border-color: aqua;
      width: 260px;
    }

    .my-autocomplete li {
      line-height: normal;
      padding: 7px;
    }

    .my-autocomplete .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .my-autocomplete .highlighted .addr {
      color: #ddd;
    }

    .my-autocomplete .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- {{optionState}} -->
    <div style="border: 1px solid #abcdef;padding: 20px;max-width: 650px;">
      <!-- 显示选择的内容 -->
      <div class="showOptionContent" style="margin: 5px 5px 20px 5px;display: flex;width: 600px;flex-wrap: wrap">
        <el-select clearable multiple v-model="optionState" placeholder="请选择" style="width: 100%;">
          <el-option v-for="item in serverData" :key="item.value" :label="item.value" :value="item"
            :disabled="item.disabled">
          </el-option>
        </el-select>
        <!--  -->
        <div style="margin: 10px 20px;width: 350px;position: relative;" v-for="(item, index) in optionState">
          <el-card :body-style="{ padding: '0px' }">
            <!-- <img :src="item.thumb" class="image" style="width: 100%;"> -->
            <el-image :src="item.thumb"></el-image>
            <div style="padding: 14px;">
              <div>value: {{item.value}}</div>
              <div>address: {{item.address}}</div>
              <div>id: {{item.id}}</div>
            </div>
          </el-card>

          <el-popover placement="top" width="160" v-model="item.IsDel">
            <p>确定删除内容吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="item.IsDel = false">
                取消
              </el-button>
              <!--  -->
              <el-button type="primary" size="mini" @click="contentBoxClose(index, item.id)">
                确定</el-button>
            </div>
            <span slot="reference" class="el-icon-error"
              style="position: absolute;top: 0px;right: 0px;color: salmon;font-size: 20px;"></span>
          </el-popover>
        </div>
      </div>
      <!-- 添加图标 -->
      <!-- <div class="addIc"
        style="width: 50px;height: 50px;border: 1px dashed #cccccc;border-radius: 10px;display: flex;align-items: center;justify-content: center;"
        @click="addFn">
        <span class="el-icon-plus"></span>
      </div> -->
      <!-- 全局弹出选择框 -->


      <!-- <el-dialog title="选择资源" :visible.sync="ResourceSwitch" width="30%" :before-close="handleClose">
        <el-select clearable v-model="optionState" placeholder="请选择" style="width: 100%;">
          <el-option v-for="item in serverData" :key="item.value" :label="item.value" :value="item.id"
            :disabled="item.disabled">
          </el-option>
        </el-select>
        <span slot="footer" class="dialog-footer">
          <el-button @click="ResourceSwitch = false">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
      </el-dialog> -->
    </div>
  </div>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 生产环境版本，优化了尺寸和速度 -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 拖拽包 -->
  <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.16.0/vuedraggable.min.js"></script>
  <script>
    const config = {
      url: 'http://api.fangkeng.wang/api'
    }
    function http(url, method, data) {
      return new Promise((res, rej) => {
        axios({
          url,
          method,
          data
        }).then(pos => res(pos)).catch(err => rej(err))
      })
    }
    var app = new Vue({
      el: '#app',
      data: {
        optionState: [], // 选择的数据
        ResourceSwitch: false, // 打开资源选择状态
        showOptionContent: [], // 选择的内容
        serverData: [], // 拉取服务器数据
        nowSelect: {}
      },
      created() {
        http(config.url + '/scenic/get_scenic_list', 'GET', {}).then(pos => {
          let list = pos.data.data.data
          list.map((item, index) => {
            let arr = {}
            arr.value = item.title
            arr.id = item.id
            arr.address = item.address
            arr.thumb = item.thumb
            arr.IsDel = false
            this.serverData.push(arr)
          })
        })
      },
      methods: {
        // 删除
        contentBoxClose(index, id) {
          this.optionState[index].IsDel = true
          this.serverData.map((item, index) => {
            if (item.id == id) {
              item.disabled = false
            }
          })
          this.optionState.splice(index, 1)
        },
        // 确认
        confirm() {
          this.serverData.map((item, index) => {
            if (item.id === this.optionState) {
              item.disabled = true
              this.showOptionContent.push(item)
            }
          })
          this.optionState = ''
          this.ResourceSwitch = false
        },
        addFn() {
          this.ResourceSwitch = true
          console.log('addFn')
        },
        handleClose() {
          this.optionState = ''
          this.ResourceSwitch = false
          console.log('handleClose')
        }
      }
    })
  </script>
</body>

</html>